<template>
  <slide-view
    v-empty="!canShowDetail"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{ padding: 0, height: '100%' }"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    @afterEnter="viewAfterEnter"
    @close="hideView"
  >
    <div v-loading="loading" ref="crmDetailMain" class="detail-main">
      <flexbox
        v-if="canShowDetail"
        direction="column"
        align="stretch"
        class="d-container"
      >
        <flexbox class="d-container-bd" align="stretch">
          <el-tabs v-model="tabCurrentName" class="d-container-bd--left">
            <el-tab-pane
              v-for="(item, index) in tabNames"
              :key="index"
              :label="item.label"
              :name="item.name"
              lazy
            >
              <component
                :is="item.name"
                :detail="detailData"
                :id="id"
                :handle="activityHandle"
                :crm-type="crmType"
                @on-handle="editSaveSuccess"
              />
            </el-tab-pane>
          </el-tabs>
          <!-- <transition name="slide-fade">
            <el-tabs
              v-show="showImportInfo"
              value="chiefly-contacts"
              type="border-card"
              class="d-container-bd--right">
              <el-tab-pane
                label="重要信息"
                name="chiefly-contacts"
                lazy>
                <import-info :list="importList" class="import-info" />
              </el-tab-pane>
            </el-tabs>
          </transition> -->
        </flexbox>
      </flexbox>
    </div>
    <!-- <el-button
      class="firse-button"
      @click="showImportInfo= !showImportInfo">重<br>要<br>信<br>息<br><i :class="{ 'is-reverse': !showImportInfo }" class="el-icon-arrow-right el-icon--right" /></el-button> -->
    <!-- <c-r-m-all-create
      v-if="isCreate"
      :action="{ type: 'update', id: id, batchId: detailData.batchId }"
      :crm-type="crmType"
      @save-success="editSaveSuccess"
      @close="isCreate = false"
    /> -->
  </slide-view>
</template>

<script>
import SlideView from "@/components/SlideView";
// import RelativeHandle from "./RelativeHandle"; // 操作记录

// import { crmLeadsReadAPI } from "@/api/crm/leads";
// import { filedGetInformationAPI } from "@/api/crm/common";
// import crmTypeModel from "@/views/crm/model/crmTypeModel";


// import CRMAllCreate from "../components/CRMAllCreate"; // 新建页面
// import DetailMixin from "../mixins/Detail";

export default {
  // 线索管理 的 线索详情
  name: "LeadsDetail",
  components: {
    SlideView,
    // RelativeHandle,
  },
  // mixins: [DetailMixin],
  props: {
    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ["crm-main-container"];
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return [];
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ["el-table__body"];
      }
    }
  },
  data() {
    return {
      // 展示加载loading
      loading: false,
      crmType: "consume",
      tabCurrentName: "ROIBaseInfo",
      // 编辑操作
      isCreate: false,
      // 展示重要信息
      // showImportInfo: true,
      // importList: []
    };
  },
  computed: {
    /**
     * 活动操作
     */
    activityHandle() {
      let temps = [];

      if (this.canCreateFollowRecord) {
        temps = [
          {
            type: "log",
            label: "写跟进"
          }
        ];
      }

      return temps;
    },

    /**
     * tabs
     */
    tabNames() {
      return [
        { label: "详细资料", name: "ROIBaseInfo" },
        { label: "操作记录", name: "RelativeHandle" },
      ];
    }
  },
  mounted() {},
  methods: {
    /**
     * 详情
     */
    getDetial() {
      // this.loading = true;
      // crmLeadsReadAPI(this.id)
      //   .then(res => {
      //     this.detailData = res.data;

      //     this.headDetails[0].value = res.data.customerName;
      //     // this.headDetails[1].value = res.data.source
      //     this.headDetails[1].value = res.data.telephone;
      //     // 负责人
      //     this.headDetails[2].value = res.data.ownerUserName;
      //     this.headDetails[3].value = res.data.createTime;
      //     this.loading = false;
      //   })
      //   .catch(() => {
      //     this.loading = false;
      //     this.hideView();
      //   });
      // this.getBaseInfo();
    },

    /**
     * 获取基础信息
     */
    getBaseInfo() {
      // this.loading = true;
      // filedGetInformationAPI({
      //   types: crmTypeModel[this.crmType],
      //   id: this.id
      // })
      //   .then(res => {
      //     this.importList = res.data;
      //     // console.log('importList', this.importList)
      //     this.loading = false;
      //   })
      //   .catch(() => {
      //     this.loading = false;
      //   });
    },

    /**
     * 关闭
     */
    hideView() {
      this.$emit("hide-view");
    },

    /**
     * 编辑成功
     */
    editSaveSuccess() {
      // this.$emit('handle', { type: 'save-success' })
      // this.getDetial()
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/roidetail.scss";

.import-info {
  overflow: auto;
  height: 100%;
}
</style>
